<!--
 * @Author: kls
 * @Date: 2023-03-13 14:05:27
 * @LastEditTime: 2023-03-14 12:14:36
 * @LastEditors: kls
 * @Description: 
 * @FilePath: \jnks-shengpingtai\src\components\map.vue
-->
<template>
  <div class="container">
    <div id="economizeMap"></div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      companyColorMap: new Map(), // 颜色
    };
  },
  components: {},
  created() {
    this.companyColorMap.set(1, "#4d90fe");
    this.companyColorMap.set(2, "#ffaa00");
    this.companyColorMap.set(3, "#ff0000");
    this.companyColorMap.set(0, "#6b798e");
    this.companyColorMap.set(-1, "#663d74");
    this.companyColorMap.set(-2, "#94784f");
  },
  methods: {
    /**
     * @description: 地图初始化
     */
    initMap() {
      const setOptions = {
        resizeEnable: true,
        center: this.mapCenter,
        mapStyle: "amap://styles/baae982a35094ead96d6340367377d08",
        viewMode: "3D",
        showLabel: true,
        zoom: 13,
        skyColor: "#3aaeee",
      };
      this.map = new AMap.Map("economizeMap", setOptions);
    },
    /**
     * @description: 移动地图中心的和层级
     * @param {*} center 中心点
     * @param {*} zoom 层级
     */
    movingCenterPoint(center, zoom = null) {
      let _this = this;
      if (zoom != null) {
        let state = false;
        _this.map.setZoomAndCenter(zoom, center, state, 1000);
      } else {
        if (this.companyLayers.length > 0) {
          _this.map.setFitView(this.companyLayers, false, [100, 130, 100, 100]);
        } else {
          _this.map.setFitView();
        }
      }
    },
  },
  mounted() {
    this.initMap();
  },
  watch: {},
  beforeDestroy() {
    // if (this.companyLayers.length > 0) {
    //   this.map.remove(this.companyLayers)
    //   this.companyLayers = []
    // }
    // if (this.dynamicPointList.length > 0) {
    //   this.map.remove(this.dynamicPointList)
    //   this.dynamicPointList = []
    // }
    // if (this.groupPositionTimer != null) {
    //   clearInterval(this.groupPositionTimer)
    // }
    this.map.clearMap();
    this.map.destroy();
  },
};
</script>

<style scoped lang="less">
.container {
  position: relative;
  background: #091833;
}
#economizeMap {
  width: 100vw;
  height: 100vh;
  position: relative;
}
</style>
